<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>Document</title>
  <style>
      *{
        margin: 0 ;
        padding: 0;
      }
      .wrap{
        width: 800px;
        height: 600px;
        margin: 20px auto;
        display: flex;
        justify-content: space-between
      }
      .wx_left{
        width: 20%;
        height: 600px;
      }
      .wx_right{
        width: 76%;
        height: 600px;
        border: 2px solid #337ab7;
        position: relative;
      }
      .onlineuser{
        background: salmon;
      }
      .friend_list{
        list-style: none;
        height: 600px;
        overflow-y: auto;
      }
      .friend_list li{
        margin-top: 20px;
        font-size: 18px;
        text-align: center;
        background: darksalmon;
      }
      .wx_head{
        width: 100%;
        background: #337ab7;
        height: 80px;
        line-height: 80px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
        align-items: center;
      }
      .wx_head input{
        height: 40px;
      }
      .wx_head span{
        color: white;
      }
      .msg_list{
        width: 100%;
        height: 450px;
        overflow: auto;
      }
      .msg_one{
        display: flex;
        height: 40px;
        line-height: 40px;
        align-items: center;
        margin-top: 20px;
      }
      .msg_one span{
        height: 40px;
        font-size: 20px;
      }
      .msg_one p{

        height: 40px;
        line-height: 40px;
        background: #449d44;
        color: white;
        padding: 5px 20px;
        border-radius: 6px;
      }
      .self{
        flex-direction: row-reverse;
        width: 100%;
      }
      .self p{
        background: salmon;
      }
      .send_wrap{
        width: 80%;
        position: absolute;
        bottom: 20px;
        left:10% ;
        height: 40px;
      }
      .send_wrap input{
        height: 40px;
        width: 70%;
      }
      .send_wrap button{
        width: 20%;
        height: 42px;
        outline: none;
        border: none;
        background: #449d44;
        color:white;
        border-radius:4px;
      }
      .tips{
        width: 100%;
        text-align: center;
        color: #ccc;
      }
  </style>
</head>
<body>
      <div class="wrap">
          <!-- 好友列表部分 -->
          <div class="wx_left">
              <button class="onlineuser">在线人数（<span id="count">6</span>）</button>
              <ul class="friend_list">
                <li>王德发</li>
                <li>刘德华</li>
              </ul>
          </div>
          <div class="wx_right">
              <!-- 头部 -->
              <div class="wx_head">
                <span>爱聊</span>
                <input id="nick" type="text" placeholder="输入你的昵称" >
              </div>
              <!-- 聊天信息列表部分 -->
              <div class="msg_list">
                <!-- <div class="msg_one">
                    <span>昵称</span>：
                    <p>你好</p>
                 </div> -->
                  <!-- <div class="msg_one self">
                      <span>昵称</span>：
                      <p>你好</p>
                  </div> -->
                  <!-- <div class="tips">
                    <span> <span>小王</span>进入了聊天室</span>
                  </div> -->
              </div>    
              <!-- 输入聊天部分 -->
              <div class="send_wrap">
                <input id="msg" type="text">
                <button id="send">发送</button>
              </div>
          </div>
      </div>
      <script>
          // 1连接到websocket服务器
          var ws=new WebSocket("ws://180.76.113.182:3000");

          // 2.监控是否连接
          ws.onopen=function(){
            console.log("连接成功了")
          }
          // 3. 准备接收信息
          ws.onmessage=function(info){
              // info--后台返回的数据
              console.log(info.data)
              var data=JSON.parse(info.data);//把后台返回的数据处理一下
              console.log(data)
              // 假如数据中的type是count 要渲染好友列表
              if(data.type=="count"){
                // 去渲染好友列表
                loadFriend(data)
              }
              // 假如返回的数据中的type是msg 要渲染聊天信息
              if(data.type=="msg"){
                loadMsg(data)
              }

          }
          // 渲染聊天信息列表
          var msg_list=document.querySelector(".msg_list");
          function loadMsg(data){
              //data-- {isMe: false, msg: "sdv " nickname: "ads" type: "msg"}
              // 用data数据生成一条消息 添加到聊天列表内
              // 假如返回的数据isMe 为true加上self的class
              str=`
                <div class="msg_one ${data.isMe?'self':''}">
                      <span>${data.nickname}</span>：
                      <p>${data.msg}</p>
                  </div>
              `
              msg_list.innerHTML+=str
            // 有人发送聊天消息后
            //             x轴0  y方向 滚动到整个聊天盒子的高度
              msg_list.scroll(0,msg_list.scrollHeight);
          }


          // 渲染好友列表和在线人数方法
          var count=document.getElementById("count");
          var firend_list=document.querySelector(".friend_list");
          function loadFriend(data){
            count.innerHTML=data.count;
            // 用返回的数据中的clients 生成好友列表
            var str=``
            data.clients.forEach(function(item,index){
              str+=`<li>${item}</li>`
            })
            // 把生成的好友列表放到ul中去
            firend_list.innerHTML=str;

            // 渲染好友列表返回的数据中有一个_type :1 有人进入
            // _type:2 有人离开
            if(data._type==1){
              msg_list.innerHTML+=`<div class="tips">
                    <span> <span>${data.nickname}</span>进入了聊天室</span>
                  </div>`
            }else if(data._type==2){
              msg_list.innerHTML+=`<div class="tips">
                    <span> <span>${data.nickname}</span>离开了聊天室</span>
                  </div>`
            }
            // 有人进入聊天室后 页面滚动到
            //             x轴0  y方向 滚动到整个聊天盒子的高度
            msg_list.scroll(0,msg_list.scrollHeight);
          }
          // 发送聊天信息
          var sendBtn=document.getElementById("send");
          var nick=document.getElementById("nick");//昵称输入框
          var msg=document.getElementById("msg")//消息内容输入框

          // 聊天内容的正则
          // 输入标签的正则
          var  msgReg=/<[^>]+>/g
          var sReg=/[TMD|MA|妈|沙雕]/g
          // 发送按钮点击事件
          sendBtn.onclick=function(){
            
            // 收集一个聊天要发送的信息
            var msgObj={
              nickname:nick.value, //昵称
              msg:msg.value.replace(sReg,"*") //聊天内容使用正则替换*发送
            }
            // 聊天框和昵称框不能为空
            if(nick.value&&msg.value){
              if(!msgReg.test(msg.value)){ //检测输入内容不带标签
                // 把要发送的数据 转为字符串
                var objStr=JSON.stringify(msgObj)
                // 调用websocket的发送方法
                ws.send(objStr)
                // 发送完成 清空聊天框
                msg.value=""
              }else{
                alert("输入的内容不符合规则")
              }
            }else{
              alert("请输入昵称和聊天信息")
            }
       
       }

      </script>
</body>
</html>